<%@ page import="driver.service.PayforServiceImple_u" %>
<%@ page import="driver.entity.Payfor" %><%--
  Created by IntelliJ IDEA.
  User: LSK
  Date: 2019/10/17
  Time: 16:59
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>西安学车管家</title>
    <link rel="shortcut icon" href="img/bitbug_favicon.ico">
    <base target="_blank" />
    <link rel="stylesheet" href="bootstrap/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="layui/layui/css/layui.css">
    <title>管理员:查看赔付申请详情,并且填写意见</title>
</head>
<style>
    body {
        margin: 0;
        padding: 0;
        background-color: rgb(241, 241, 241);
    }

    #search {
        background: #ffffff;
        box-shadow: 2px 0px 15px 1px rgb(231, 231, 231);
    }

    #search li {
        border-bottom: 1px solid rgb(255, 255, 255);
    }

    #search li:hover {
        border-bottom: 1px solid #5FB878;
    }

    #search .navbar-brand:hover,
    #search li a:hover {
        color: #5FB878;
    }

    .container {
        background: #fff;
    }

    table td,
    th,
    tr {
        font-size: 13px;
    }

    #btn1 {
        opacity: 0.2;
        margin-left: 100px;
        transition: all 0.8s ease-out;
    }
</style>

<body>
    <div>
        <!--导航条-->
        <nav class="navbar navbar-default " id="search">
            <div class="container">
                <!-- Brand and toggle get grouped for better mobile display -->
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                        data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a target='_blank' class="navbar-brand" href="index.jsp" data-toggle="tooltip"
                        data-placement="bottom" title="返 回 首 页">
                        <img src="asset/logoBig.png" style="width: 100px;height:38px;margin-top: -7px" alt="">
                    </a>
                </div>

                <!-- Collect the nav links, forms, and other content for toggling -->
                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                    <ul class="nav navbar-nav">
                        <li><a target='_blank' href="showusers.jsp?page=0">查看所有学员基本信息 <span class="sr-only"></span></a>
                        </li>
                        <li><a target='_blank' href="adduser.jsp">批量导入学员基本信息</a></li>
                        <li><a target='_blank' href="payfor.jsp?page=0">处理学员理赔信息</a></li>
                        <li><a target='_blank' href="showschools.jsp?page=0">驾校信息修改</a></li>
                    </ul>
                    <ul class="nav navbar-nav navbar-right">
                    </ul>
                </div><!-- /.navbar-collapse -->
            </div><!-- /.container-fluid -->
        </nav>
        <!-- 内容主体 -->
        <div class="container">
            <%
        String payfor_id="5";//这个数字应该从页面传参,这里只为了测试
        payfor_id=request.getParameter("id");
        PayforServiceImple_u service=new PayforServiceImple_u();
        Payfor payfor = service.show_detail(payfor_id);
        request.setAttribute("payfor",payfor);

    %>
            <fieldset class="layui-elem-field layui-field-title ">
                <legend>
                    <h2 class="h2">处理详情</h2>
                </legend>
            </fieldset>
            <table class=" table table-bordered table-striped">
                <tr>
                    <td>编号:${payfor.id}</td>
                    <td>姓名:${payfor.name}</td>
                    <td>申请时间:${payfor.time}</td>
                </tr>
                <tr>
                    <td>手机号码:${payfor.phonenum}</td>
                    <td>考试时间:${payfor.examtime}</td>
                    <td>考试地点:${payfor.examadd}</td>
                </tr>
                <tr>
                    <td>122密码:${payfor.pass122}</td>
                    <td colspan="2">理赔项目:${payfor.examtime}</td>
                </tr>
                <!--管理员权限提供图片下载链接-->
                <tr>
                    <td colspan="1">身份证正面照片:<br><img style="width: 300px;height: 200px" src="${payfor.idcard1_src}"
                            alt="身份证正面照片"></td>
                    <td colspan="1">身份证反面照片:<br>
                        <img style="width: 300px;height: 200px" src="${payfor.idcard2_src}" alt="身份证反面照片">
                    </td>
                    <td colspan="1">考试未通过照片:<br>
                        <img style="width: 300px;height: 200px" src="${payfor.unpass_src}" alt="考试未通过照片">
                    </td>
                </tr>
                <%
            //照片命名规则；
            //前缀
            String head=payfor.getName()+"_"+payfor.getPhonenum()+"_"+payfor.getExamtime()+"_"+payfor.getExamadd()+"_";
            pageContext.setAttribute("head",head);

        %>
                <tr>
                    <td colspan="1"><a target='_blank' href="${payfor.idcard1_src}"
                            download="${head}身份证正面.jpg">下载身份证正面照片</a></td>
                    <td colspan="1"><a target='_blank' href="${payfor.idcard2_src}"
                            download="${head}身份证反面.jpg">下载身份证反面照片</a></td>
                    <td colspan="1"><a target='_blank' href="${payfor.unpass_src}"
                            download="${head}考试未通过.jpg">下载考试未通过照片</a></td>
                </tr>
            </table>
            <hr class="layui-bg-green">
            <h3 class="h3">审核意见</h3>
            <!-- <form method="post" role="form" class="layui-form layui-form-pane">
                <div class="checkbox">
                    <label><input type="radio" name="pass" value="1">通过</label>
                </div>
                <div class="checkbox">
                    <label><input type="radio" name="pass" value="2">不通过</label>
                </div>
                <div class="form-group">-->
            <!--<textarea  name="val" class="form-control" rows="3"></textarea>-->

            <!--  </div>
                <div class="layui-form-item">
                    <div class="layui-input-inline">
                        <select name="val">-->
            <!--默认选择第一项-->
            <!--  <option selected=selected value="理赔失败，请联系您的理赔管家，13474170015">理赔失败，请联系您的理赔管家，13474170015
                            </option>
                            <option value="学员12123密码错误">学员12123密码错误</option>
                            <option value="考试科目成绩覆盖，请提供成绩单，或者车管所缴费证明">考试科目成绩覆盖，请提供成绩单，或者车管所缴费证明</option>
                            <option value="未提供学员身份证正反面照片，或照片不清晰，无法理赔">未提供学员身份证正反面照片，或照片不清晰，无法理赔</option>
                            <option value="学员考试缺考，无法理赔">学员考试缺考，无法理赔</option>
                        </select>
                    </div>
                </div>
                <input style="display: none" name="id" value="">
                <button class="btn btn-success" type="button" id="btn1" onclick="fun()" class="btn-lg">
                    提交
                </button>
            </form>
            -->

            <form method="post" role="form" class="layui-form layui-form-pane">
                <div class="layui-form-item">
                    <div class="layui-input-inline">
                        <label class="layui-form-label" style=" border-style: none;">通过</label>
                        <div class="layui-input-block">
                            <input type="radio" class="pass" name="pass" value="1">
                        </div>
                    </div>
                    <div class="layui-input-inline">
                        <label class="layui-form-label" style=" border-style: none;">不通过</label>
                        <div class="layui-input-block">
                            <input type="radio" class="pass" name="pass" value="2">
                        </div>
                    </div>
                    <div class="layui-input-inline">
                        <select id="val" name="val">
                            <!--默认选择第一项-->
                            <option selected=selected value="理赔失败，请联系您的理赔管家，13474170015">理赔失败，请联系您的理赔管家，13474170015
                            </option>
                            <option value="学员12123密码错误">学员12123密码错误</option>
                            <option value="考试科目成绩覆盖，请提供成绩单，或者车管所缴费证明">考试科目成绩覆盖，请提供成绩单，或者车管所缴费证明</option>
                            <option value="未提供学员身份证正反面照片，或照片不清晰，无法理赔">未提供学员身份证正反面照片，或照片不清晰，无法理赔</option>
                            <option value="学员考试缺考，无法理赔">学员考试缺考，无法理赔</option>
                        </select>
                    </div>
                    <div class="layui-input-inline">
                        <input style="display: none" id="id" name="id" value="<%=payfor_id%>">
                        <button class="btn btn-success" type="button" id="btn1" onclick="fun()" class="btn-lg">
                            提交
                        </button>
                    </div>
                </div>
                <div class="form-group">
                    <!--<textarea name="val" class="form-control" rows="3"></textarea>-->
                </div>
            </form> 
            <br>
            <br>
            <br>
            <hr class="layui-bg-green" style="margin-bottom: 80px">
            <br>
            <br>
            <br>
        </div>
    </div>
    <script src="bootstrap/dist/js/jquery-3.4.1.min.js"></script>
    <script src="bootstrap/dist/js/bootstrap.min.js"></script>
    <script src="bootstrap/dist/js/layui/layui.all.js"></script>
    <script src="Lskjs/lskjs.js" charset="utf-8"></script>
    <script>
        layui.use(['form', 'layedit', 'laydate'], function () {
            var form = layui.form,
                layer = layui.layer;

            //自定义验证规则
            form.verify({
                title: function (value) {
                    if (value.length < 5) {
                        return '标题至少得5个字符啊';
                    }
                },
                pass: [
                    /^[\S]{6,12}$/, '密码必须6到12位，且不能出现空格'
                ],
                content: function (value) {
                    layedit.sync(editIndex);
                }
            });

            //监听指定开关
            form.on('switch(switchTest)', function (data) {
                layer.msg('开关checked：' + (this.checked ? 'true' : 'false'), {
                    offset: '6px'
                });
                layer.tips('温馨提示：请注意开关状态的文字可以随意定义，而不仅仅是ON|OFF', data.othis)
            });

            //监听提交
            form.on('submit(demo1)', function (data) {
                layer.alert(JSON.stringify(data.field), {
                    title: '最终的提交信息'
                });
                return false;
            });
        });
    </script>
    <script>
        //doPayfor
        function fun() {
            //使用$.ajax()发送异步请求
            //pass val id

            //判断表单选择值
            var passVal;
            for(var i=0;i<document.getElementsByClassName(' layui-form-radio').length;i++) {
                if (document.getElementsByClassName(' layui-form-radio')[i].className == "layui-unselect layui-form-radio layui-form-radioed") {
                    passVal = ++i;
                }
            }
            $.ajax({
                url: "${pageContext.request.contextPath}/doPayfor", // 请求路径
                type: "POST", //请求方式
                data: {
                    // "pass": $("input[name='pass']").val(),
                    // "val": $("input[name='val']").val(),
                    // "id": $("input[name='id']").val()

                    "pass": passVal,
                    "val": $("#val").val(),
                    "id": $("#id").val()
                },
                success: function (data) {
                    //myalter(data);
                    layui.use('layer', function () {
                        var layer = layui.layer;

                        layer.msg(data, {
                            time: 20000, //20s后自动关闭
                            btn: ['确认']
                        });
                        $('.layui-layer-msg').css('backgroundColor', 'rgba(0,150,136,0.5)');

                    });
                }, //响应成功后的回调函数
                error: function () {
                    //myalter("500错误，请联系管理员")
                    layui.use('layer', function () {
                        var layer = layui.layer;

                        layer.msg("500错误，请联系管理员", {
                            time: 20000, //20s后自动关闭
                            btn: ['确认']
                        });
                        $('.layui-layer-msg').css('backgroundColor', 'rgba(0,150,136,0.5)');

                    });
                }, //表示如果请求响应出现错误，会执行的回调函数

                dataType: "text" //设置接受到的响应数据的格式
            });
        }
    </script>
    <script>
        /* 鼠标特效 */
        var a_idx = 0;
        jQuery(document).ready(function ($) {
            $("body").click(function (e) {
                var a = ["富强", "民主", "文明", "和谐", "自由", "平等", "公正", "法治", "爱国", "敬业", "诚信", "友善"];
                var $i = $("<span/>").text(a[a_idx]);
                a_idx = (a_idx + 1) % a.length;
                var x = e.pageX,
                    y = e.pageY;
                $i.css({
                    "z-index": 9999999999999999999999999999999999999999,
                    "top": y - 20,
                    "left": x,
                    "position": "absolute",
                    "font-weight": "bold",
                    "color": "#ff6651"
                });
                $("body").append($i);
                $i.animate({
                        "top": y - 180,
                        "opacity": 0
                    },
                    1500,
                    function () {
                        $i.remove();
                    });
            });
        });
        //alert("用户名不存在，请联系管理员");
    </script>
    <script>
        $(function () {
            $('[data-toggle="tooltip"]').tooltip();
            $('#btn1').css({
                "opacity": "1",
                "transform": "translateX(-80px)"
            })
        })
    </script>
</body>

</html>